/**
 * By Alpha
 * Author: alixez <alixe.z@foxmail.com>
 * Date: 2017/12/13
 */

import React from 'react';
import { Tree, Divider, Input } from 'antd';
import { config } from 'utils';
import styles from './Pane.less';
import PropTypes from 'prop-types';
import UserSelectTransfer from './UserSelectTransfer';
import CreateJobForm from './CreateJobForm';

const TreeNode = Tree.TreeNode;
const Search = Input.Search;

export default class JobPane extends React.Component {
  static propTypes = {
    organization: PropTypes.object.isRequired,
    organizationJob: PropTypes.object.isRequired,
    dispatch: PropTypes.func.isRequired,
  };

  constructor (props) {
    super(props);
    this.state = {
      selectedRows: [],
      unSelectedRows: [],

      createFormVisible: false,
    };
  }

  /**
   * 选择开发部门
   */
  _handleSelectDepartment = (value) => {
    // 设置当前开发部门

    const { dispatch, organizationJob: { jobs } } = this.props;
    const currentJobID = value[0];
    if (currentJobID) {
      const job = jobs.find(_ => {
        return _.ID === currentJobID;
      });
  
      // console.log('将要更改的部门', value);
      dispatch({
        type: 'organizationJob/changeCurrentJob',
        payload: {
          job,
        },
      });
    }
  }

  /**
   * 将用户加入当前职位
   */
  _handleAddToDepartment = (users) => {
    const { dispatch } = this.props;
    if (!Array.isArray(users)) {
      users = Object.values(users);
    }
    // console.log(Array.isArray(Object.values(users)), 'isArray', Object.values(users));
    dispatch({
      type: 'organizationJob/addUserToJob',
      payload: {
        users, 
      },
    });
  }

  /**
   * 将用户从当前职位移除
   */
  _handleRemoveFromDepartment = (users) => {
    const { dispatch } = this.props;
    if (!Array.isArray(users)) {
      users = Object.values(users);
    }
    dispatch({
      type: 'organizationJob/removeUserFromJob',
      payload: {
        users,
      },
    });
  }

  _toggleCreateFormModal = () => {
    this.setState({
      createFormVisible: !this.state.createFormVisible,
    });
  }

  _handleCreateFormCancel = () => {
    this._toggleCreateFormModal();
  }

  _handleCreateFormSubmit = (values) => {
    // console.log(values);
    // const parent = values.parentID.length > 0 ? values.parentID[values.parentID.length - 1] : "";
    const postData = {
      jobName: values.name,
      // parent,
      // description: values.description,
    };

    const { dispatch } = this.props;
    dispatch({
      type: 'organizationJob/createJob',
      payload: {
        postData, 
      },
    });
  }

  _generateDeptsTree = () => {
    const { jobs } = this.props.organizationJob;
    
    return (
      <Tree
        showLine
        onSelect={this._handleSelectDepartment}
        defaultExpandedKeys={['0-0-0']}
      >
        {jobs.map(job => {
          return <TreeNode title={job.Name} key={job.ID} />;
        })}
      </Tree>
    );
  }

  __loadAllUsers = (page) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'organizationJob/loadAllUsers',
      payload: {
        isLoad: true,
        page,
        limit: config.DefaultPager.pageSize,
      },
    });
  };

  render () {
    const { organization, organizationJob } = this.props;

    return (
      <div className={styles.paneContainer} >
        <CreateJobForm 
          visible={this.state.createFormVisible}
          handleCancel={this._handleCreateFormCancel}
          handleSubmit={this._handleCreateFormSubmit}
        />
        <div className={styles.card} >
          <div className={styles.header}>
            <div className={styles.title}>
              <h3>{organization ? organization.Name : '-'}</h3>
            </div>
            <div className={styles.btn}>
              <a onClick={this._toggleCreateFormModal}>新增职位</a>
            </div>
          </div>
          <div className={styles.content} >
            <div className={styles.search}>
              <Search
                placeholder="搜索"
                onSearch={value => console.log(value)}
              />
            </div>
            {this._generateDeptsTree()}
          </div>
        </div>
        <Divider type="vertical" dashed={false} className={styles.divider} />
        <UserSelectTransfer
          title={organizationJob.currentJob && organizationJob.currentJob.Name}
          folderLength={(organizationJob.jobs || []).length}
          selectedRows={organizationJob.selectedUsers}
          allRows={organizationJob.allUsers}
          hasMore={false}
          onLoadRightList={this.__loadAllUsers}
          onAdd={users => this._handleAddToDepartment(users)}
          onRemove={users => this._handleRemoveFromDepartment(users)}
        />
      </div>
    );
  }
}
